<!--  -->
<template>
  <div>
    <!-- 添加子系统 -->
    <el-dialog :title="(m_Addsubsystem.IsAdd ? '添加' : '编辑') + '子系统'" width="50%" :visible.sync="m_Addsubsystem.vsb">
      <el-form :model="m_Addsubsystem.form" ref="subsystemForm" :rules="m_AddsubsystemRules" label-width="150px" size="small" label-position="right" hide-required-asterisk>
        <el-form-item label="子系统名称:" prop="systemName">
          <el-input v-model="m_Addsubsystem.form.systemName"></el-input>
        </el-form-item>
        <el-form-item label="质保到期日:" prop="warrantyDate">
          <el-date-picker v-model="m_Addsubsystem.form.warrantyDate" type="date" placeholder="选择日期"> </el-date-picker>
        </el-form-item>
        <el-form-item label="说明:">
          <el-input v-model="m_Addsubsystem.form.systemDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" plain @click="m_Addsubsystem.vsb = false">取 消</el-button>
        <el-button type="primary" size="mini" @click="SubSystemSubmit('subsystemForm')">提交</el-button>
      </span>
    </el-dialog>
    <!-- 系统说明 -->
    <el-dialog title="说明" width="50%" :visible.sync="m_Instruction.vsb" :close-on-click-modal="false">
      <el-form label-width="150px" size="small" label-position="right">
        <el-form-item label="说明:">
          <el-input v-model="m_Instruction.form.systemDesc"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="m_Instruction.vsb = false">取 消</el-button>
        <el-button size="mini" type="primary" :disabled="$parent.FormDis()" @click="InstructionSave()">提交</el-button>
      </span>
    </el-dialog>
    <!-- 设备信息 -->
    <el-dialog title="设备信息" width="50%" :visible.sync="m_DeviceInfor.vsb" :close-on-click-modal="false">
      <div v-for="(item, i) in m_DeviceInfor.rows" :key="i">
        <el-form ref="DeviceForm" :model="item" label-width="120px" size="small" label-position="right">
          <el-row>
            <el-col :span="12">
              <el-form-item label="设备名称:" prop="deviceName" :rules="[{ required: true, message: '该选项不能为空', trigger: 'blur' }]">
                <el-input :disabled="$parent.FormDis()" v-model="item.deviceName"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="设备编码:" prop="deviceCode"  >
                <el-input :disabled="true" v-model="item.deviceCode"  placeholder="自动生成"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="位置编码:" prop="locationCode" :rules="[{ required: true, message: '该选项不能为空', trigger: 'blur' }]">
                <el-input :disabled="$parent.FormDis()" v-model="item.locationCode"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="备注:" prop="deviceDesc"> <el-input :disabled="$parent.FormDis()" v-model="item.deviceDesc"></el-input> </el-form-item>
            </el-col>
            <el-col :span="24">
              <div style="text-align: right">
                <el-button :disabled="$parent.FormDis()" size="mini" @click="DeviceSave(item, i)" type="primary" plain>保存</el-button>
                <el-button :disabled="$parent.FormDis()" size="mini" @click="DeviceDel(item, i)" type="danger" plain>删除</el-button>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <el-divider></el-divider>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" v-if="!$parent.FormDis()" @click="DeviceAdd()">添加设备</el-button>
      </span>
    </el-dialog>
    <!-- 附件材料 -->
    <el-dialog title="附件材料" width="50%" :visible.sync="m_AttachmentMaterials.vsb" :close-on-click-modal="false">
      <template v-for="(item, i) in m_AttachmentMaterials.form.businessAttachment">
        <el-form :key="i" label-width="80px" size="small" label-position="right">
          <el-row>
            <el-col :span="8">
              <el-form-item label="说明：">
                <el-input :disabled="$parent.FormDis()" v-model="item.remark" placeholder="请输入内容"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item v-if="item.fileId" label="附件：">
                <el-button class="btntext" type="text" @click="DownClick(item)">{{ item.fileTitle }}</el-button>
              </el-form-item>
              <el-form-item v-else label="附件：">
                <div style="display: flex; align-items: center">
                  <el-upload class="upload-demo" action accept="" :disabled="$parent.FormDis()" :http-request="event => beforeupload(event.file, item)">
                    <el-button type="primary" plain style="margin-right: 10px" size="mini" :disabled="$parent.FormDis()">上传</el-button>
                  </el-upload>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="">
                <div style="float: right">
                  <el-button size="mini" type="danger" :disabled="$parent.FormDis()" plain @click="AttachmentDel(item, i)">删除</el-button>
                </div>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </template>
      <span slot="footer" class="dialog-footer">
        <!-- <el-button type="primary" size="mini" :disabled="$parent.FormDis()" @click="AttachmentSave()">保存</el-button> -->
        <el-button type="primary" size="mini" :disabled="$parent.FormDis()" @click="AttachmentAdd()">添加附件</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dayjs from 'dayjs';
import { uploadPhoto } from '@/api';
import Api from '../../../api/EquipmentManage';
export default {
  components: {},
  data() {
    return {
      projectKey:this.$route.query.projectKey || localStorage.getItem("projectKey"),
      m_dayjs: dayjs,
      //添加子系统
      m_Addsubsystem: {
        IsAdd: true,
        vsb: false,
        form: {
          systemDesc: null, //说明
          warrantyDate: null, //质保期
          systemName: null, //子系统名称
        },
      },
      m_AddsubsystemRules: {
        systemName: [{ required: true, message: '请输入子系统名称', trigger: 'blur' }],
        warrantyDate: [{ type: 'date', required: true, message: '请选择日期', trigger: 'change' }],
      },
      //系统说明
      m_Instruction: {
        IsAdd: true,
        vsb: false,
        form: {},
      },
      //设备信息
      m_DeviceInfor: {
        IsAdd: true,
        vsb: false,
        form: {},
        rows: [],
      },
      //附件材料
      m_AttachmentMaterials: {
        IsAdd: true,
        vsb: false,
        form: {},
      },
    };
  },
  filters: {},
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    // m_Data: {
    //   immediate: true,
    //   deep: true,
    //   handler(val) {},
    // },
  },
  //接收参数
  props: {
    //m_Data: {
    //type: String,
    //default: '',
    //},
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {},
  //方法集合
  methods: {
    //子系统修改说明
    InstructionSave() {
      Api.systemupdate({ ...this.m_Instruction.form }).then(res => {
        this.m_Instruction.vsb = false;
        if (res.success) this.$message.success(res.message);
        else this.$message.warning(res.message);
        this.$parent.GetData();
      });
    },

    //获取设备列表
    GetDeviceData() {
      if (this.$parent.FormDis()) {
        Api.devicelist2({ systemKey: this.m_DeviceInfor.form.primaryKey, status: 1 }).then(res => {
          this.m_DeviceInfor.rows = res.rows;
        });
      } else {
        Api.devicelist({ systemKey: this.m_DeviceInfor.form.primaryKey, status: 1 }).then(res => {
          this.m_DeviceInfor.rows = res.rows;
        });
      }
    },
    //添加设备
    DeviceAdd() {
      this.m_DeviceInfor.rows.push({
        deviceName: null, //设备名称
        deviceCode: null, //设备编码
        locationCode: null, //位置编码
        deviceDesc: null, //说明
      });
    },
    //保存设备
    DeviceSave(item, i) {
      this.$refs.DeviceForm[i].validate(res => {
        if (res) {
          if (!item.primaryKey) {
            Api.devicecreate({ ...item, systemKey: this.m_DeviceInfor.form.primaryKey, workId: this.$parent.m_WorkMsg.workId, projectKey: this.projectKey }).then(res => {
              this.GetDeviceData();
              if (res.success) this.$message.success(res.message);
              else this.$message.warning(res.message);
            });
          } else {
            Api.deviceupdate({ ...item }).then(res => {
              this.GetDeviceData();
              if (res.success) this.$message.success(res.message);
              else this.$message.warning(res.message);
            });
          }
        }
      });
    },
    //删除设备
    DeviceDel(item, i) {
      if (!item.primaryKey) {
        this.m_DeviceInfor.rows.splice(i, 1);
        return;
      }
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        Api.devicedelete({ primaryKey: item.primaryKey }).then(res => {
          this.GetDeviceData();
        });
      });
    },
    //子系统 添加
    SubSystemSubmit(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          if (this.m_Addsubsystem.IsAdd) {
            Api.systemcreate({
              ...this.m_Addsubsystem.form,
              systemStatus: 1,
              systemType: this.$parent.m_Form.systemType,
              workId: this.$parent.m_WorkMsg.workId,
              parentPrimaryKey: this.$parent.m_Form.primaryKey,
            }).then(res => {
              this.$parent.GetData();
              this.m_Addsubsystem.vsb = false;
            });
          }
        }
      });
    },

    //附件
    AttachmentAdd() {
      if (!this.m_AttachmentMaterials.form.businessAttachment) this.m_AttachmentMaterials.form.businessAttachment = [];
      this.m_AttachmentMaterials.form.businessAttachment.push({ fileUrl: null, fileTitle: null, fileId: null });
      // this.m_AttachmentMaterials.form.businessAttachment.splice(0, 0, { fileUrl: null, fileTitle: null, fileId: null });
    },
    AttachmentSave() {
      this.$parent.Save();
    },

    AttachmentDel(item, i) {
      if (!item.primaryKey) {
        this.m_AttachmentMaterials.form.businessAttachment.splice(i, 1);
        return;
      }
      this.$confirm('是否确认删除', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.m_AttachmentMaterials.form.businessAttachment.splice(i, 1);
      });
    },

    beforeupload(file, item) {
      uploadPhoto(file).then(res => {
        item.fileUrl = res.data.rows[0].url;
        item.fileTitle = res.data.rows[0].originalName;
        item.fileId = res.data.rows[0].key;
        // item.businessAttachmentParam = [{ fileUrl: res.data.rows[0].url, fileTitle: res.data.rows[0].originalName, fileId: res.data.rows[0].key }];
        this.$message.success('上传成功');
      });
    },
    DownClick(item) {
      window.open(item.fileUrl);
    },
  },
};
</script>
<style scoped>
::v-deep .el-divider {
  margin: 0 0 24px;
}
.btntext {
  width: 100%;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* @import url(); 引入css类 */
</style>